

<template>
  <div class="wrapper">
    <img class="main-bg" src="../assets/b1@2x.png" alt="">
    <div class="header">
      <div class="header-title">云集中运维监控系统</div>
      <img
        class="header-bg"
        src="../assets/bg.png"
        alt=""
      />
    </div>
    <div class="content flex-1 pr">
      <left></left>

      <radar></radar>

      <div
        class=" flex-1 flex column"
        style="postion: relitive"
      >
        <div
          class="main-content  "
        >
          <ve-map
            :data="chartData1"
            :height="mapHeight"
            :legend-visible="false"
            :mapGrid="mapGrid"
            :settings="chartSettings"
          ></ve-map>
        </div>
        <div class="center-bottom ">
          <div class="bottom-content flex column">
            <div class="b-box-header">区域资源池汇总</div>
            <div class="bottom-count flex center">
              <div
                class="count-item padding-10 flex-1 flex column center "
                v-for="(i, index) in areaCount"
                :key="index"
              >

                <div class="num-count">{{ i.val }}</div>
                <div class="title">{{ i.name }}</div>

              </div>
            </div>
          </div>
        </div>
      </div>
      <right></right>

    </div>
  </div>
</template>
<script>
import VeMap from "v-charts/lib/map.common";
// import VeRing from "v-charts/lib/ring.common";
import radar from "./radar.vue";
import left from "./left.vue";
import right from "./right.vue";

export default {
  name: "home",
  components: {
    VeMap,
    radar,
    right,
    left,
    //  ,VeRing
  },
  mounted() {
    this.mapHeight =
      document.getElementsByClassName("main-content")[0].clientHeight + "px";
    console.log('home',this.mapHeight);
  },
  data() {
    let data = [];

    for (let i = 0; i <= 360; i++) {
      let t = (i / 180) * Math.PI;
      let r = Math.sin(2 * t) * Math.cos(2 * t);
      data.push([r, i]);
    }

    this.mapGrid = {
      left: "auto",
      right: "auto",
      top: 100,
      bottom: "auto",
    };
    this.chartSettings = {
      position: "province/guangdong",

      opacity: 0.8,
      label: {
        show: true,
        position: ["50%", "50%"],
        color: "#fff",
      },
      itemStyle: {
        normal: {
          borderColor: "rgb(255, 241, 135)",
          areaColor: "rgba(37, 147, 252, 0.7)",
        },
      },
      zoom: 0.8,
    };
    return {
      areaCount: [
        {
          val:  223,
          name: "广州",
        },
        {
          val: 274,
          name: "深圳",
        },
        {
          val: 145,
          name: "佛山",
        },
        {
          val: 23,
          name: "惠州",
        },
        {
          val: 11,
          name: "潮州",
        },
        {
          val: 22,
          name: "汕头",
        },
        {
          val: 11,
          name: "清远",
        },
      ],

      chartData1: {
        columns: ["位置", "资源池"],
        rows: [
          { 位置: "吉林", " 资源池": 123 },
          { 位置: "北京", " 资源池": 1223 },
          { 位置: "上海", " 资源池": 2123 },
          { 位置: "浙江", " 资源池": 4123 },
        ],
      },

      mapHeight: "0px",
     
    };
  },
};
</script>
<style lang="less" >
@import url(../style/main.less);
.wrapper {
  position: relative;
  //   z-index: -10;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  // background-image: url("../assets/b1.png");
  // background-size: cover;
  overflow: hidden;
}
.main-content {
  flex-direction: column;
  flex: 5;
  height: 100%;
  width: 100%;
  // margin-top: 80px;
}
.header {
  position: relative;
  width: 1920px;
  height: 80px;
  line-height: 80px;

  .header-bg {
    width: 100%;
    height: 80px;
  }

  .header-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    font-size: 32px;
    letter-spacing: 10px;
    color: #00ffff;
  }
}
.content {
  flex: 1;
  display: flex;
  .left {
    // transform: skewY(-1deg);
  }
  .right {
    
    // transform: skewY(1deg);
  }
  .top {
    flex: 2;
  }
  .bottom{
    
  }
  .center{
    flex: 5;
  }
  .middle {
    flex:3;
    // margin-top: 50px;
    .box-content {
      // height: 400px;
    }
  }
.height-100{
  height: 100%;
}
  .box-header {
    .header;
    height: 50px;
    line-height: 50px;
    width: 480px;
  }
  .box-content {
    // height: 100%;
    // height: 200px;
    background: #030720;
    .title {
      color: #fff;
      font-size: 14px;
    }
    .count {
      padding-top: 40px;
      color: #00ffff;
      font-weight: bold;
      font-size: 32px;
    }

    .box-bar {
      color: #fff;
      .bar {
        height: 10px;
        background: #28388f94;
        border-radius: 10px;
        .percent-color {
          height: 10px;
          border-radius: 10px;
        }
      }
      .bar-txt {
        font-size: 16px;
        padding: 0 20px;
      }
    }
  }
}
.point {
  position: relative;
  height: 10px;
  width: 100%;

  border-radius: 10px;
  animation: mymove 5s linear infinite;
  &::after {
  }
}

@keyframes mymove {
  from {
    z-index: 10;
    opacity: 1;
    box-shadow: 0 0 15px #fff;
  }
  50% {
    opacity: 0.1;
  }
  to {
    z-index: 10;
    opacity: 1;
    box-shadow: 0 0 15px #fff;
  }
}
.center-bottom {
  flex: 1;
  width: 100%;
}
</style>